<template>
  <div class="inews">
    <div class="news_t">
      <span class="fr"><a href="#" @click.prevent="viewMore">更多 ></a></span>新闻资讯
    </div>
    <ul>
      <li v-for="news in displayedNewsList" :key="news.id">
        <span>[ {{ getNewsType(news) }} ]</span><a href="#" @click.prevent="viewNews(news.id)">{{ news.title }}</a>
      </li>
    </ul>
    <div class="charge_t">
      话费充值<div class="ch_t_icon"></div>
    </div>
    <form @submit.prevent="handleRecharge">
      <table border="0" style="width:205px; margin-top:10px;" cellspacing="0" cellpadding="0">
        <tbody>
          <tr height="35">
            <td width="33">号码</td>
            <td><input type="text" v-model="rechargeForm.phoneNumber" class="c_ipt" /></td>
          </tr>
          <tr height="35">
            <td>面值</td>
            <td>
              <select class="jj" v-model="rechargeForm.amount">
                <option value="100">100元</option>
                <option value="50">50元</option>
                <option value="30">30元</option>
                <option value="20">20元</option>
                <option value="10">10元</option>
              </select>
              <span style="color:#ff4e00; font-size:14px;">￥{{ (rechargeForm.amount * 0.995).toFixed(1) }}</span>
            </td>
          </tr>
          <tr height="35">
            <td colspan="2"><input type="submit" value="立即充值" class="c_btn" /></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</template>

<script>
export default {
  name: 'NewsSection',
  props: {
    newsList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      rechargeForm: {
        phoneNumber: '',
        amount: '100'
      }
    }
  },
  computed: {
    // 确保只显示前5条新闻，与原生页面保持一致
    displayedNewsList() {
      // 由于后端已经返回最新的5条新闻，这里直接使用
      return this.newsList.slice(0, 5)
    }
  },
  methods: {
    /**
     * 根据新闻标题内容判断新闻类型
     * 严格对照数据库表字段：id, title, content, createTime, deleted
     * 实现与原生Index.html页面一致的效果
     */
    getNewsType(news) {
      // 优先检查新闻标题中是否包含特定关键词来判断类型
      if (news.title) {
        const title = news.title
        // 特惠类新闻判断
        if (title.includes('特惠') || title.includes('促销') || title.includes('折扣') || 
            title.includes('优惠') || title.includes('打折') || title.includes('特价')) {
          return '特惠'
        }
        // 公告类新闻判断
        else if (title.includes('公告') || title.includes('通知') || title.includes('通告') ||
                 title.includes('发布') || title.includes('上线') || title.includes('开始')) {
          return '公告'
        }
        // 新闻类判断（默认类型）
        else {
          return '新闻'
        }
      }
      
      // 默认返回公告类型
      return '公告'
    },
    
    /**
     * 查看更多新闻
     */
    viewMore() {
      this.$emit('view-more')
    },
    
    /**
     * 查看新闻详情
     * @param {number} id - 新闻ID
     */
    viewNews(id) {
      this.$emit('view-news', id)
    },
    
    /**
     * 处理话费充值
     */
    handleRecharge() {
      if (!this.rechargeForm.phoneNumber) {
        this.$message.warning('请输入手机号码')
        return
      }
      // 验证手机号格式
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.rechargeForm.phoneNumber)) {
        this.$message.warning('请输入正确的手机号码')
        return
      }
      this.$emit('recharge', { ...this.rechargeForm })
    }
  }
}
</script>

<style scoped>
/* 使用项目现有样式，保持与原生页面一致 */

</style>